{extend name="common/base" /}

{block name="style"}
<style type="text/css">
    body{
        background: #F5F5F5;
    }
    .sqbh-fixed .fixed-div4{
        width: 30%;
        float: right;
        position: relative;
    }
</style>
{/block}
{block name="body"}
<div class="sqbh1-mains">

    <div class="sqbh1-top">
        <h2 class="top-h2">补货须知</h2>
        <p class="top-ps">1.家庭盒子中商品剩余大于<i>{$buhuo_config.zongjian}</i>件商品时，平台拒绝补货</p>
        <p class="top-ps">2.单次补货商品金额低于<i>￥{$buhuo_config.jine}</i>时，平台拒绝补货</p>
    </div>
    <div class="sqbh1-center">
        <div class="center-div">
            <span class="ce-span1">补货备注</span>
            <span class="ce-span2">箱子编号:{$box_no}</span>
        </div>
        <textarea placeholder="对本次补货有啥要求，可以写在备注哟" class="tex-div js-remark"></textarea>
    </div>
    <div class="sqbh1-nav" style="margin-bottom:0.5rem;">
        <div class="li1">
           请选择补货数量
        </div>
        <!-- 当class="li2"时,字体颜色为淡灰色 -->
        {foreach $goods_list as $vo }
        <li class=" js-goods-li {if condition="$vo['stock_num'] == 0" }li2{/if}">
            <div class="bh-div1 bh-div1s">【{$vo.brand_title}】{$vo.goods_title},{$vo.goods_model},{$vo.goods_spec}</div>
                         <div class="bh-div2 bh-div2s">{$vo.stock_num}</div>
                         <div class="bh-div3 bh-div3s">
                             <img src="__CDN__/html/img/hz-img26.png" data-id="{$vo['goods_id']}" data-type="0" data-ope="0" class="img-jg change-num">
                             <input type="text" value="{$vo.buy_num}" class="text-inp js-goods-num-{$vo['goods_id']}" disabled="disabled">
                             <img src="__CDN__/html/img/hz-img23.png" data-id="{$vo['goods_id']}" data-type="0" data-ope="1"  class="img-jg change-num">            
                         </div>
                     </li>
                     {/foreach}
        </div>
        <ul class="sqbh1-nav" style="margin-bottom:0.5rem;">
            <li class="li1">
                <div class="bh-div1">商品名称</div>
                <div class="bh-div2">剩余库存</div>
                <div class="bh-div3">本次补货库存</div>
            </li>
            <!-- 当class="li2"时,字体颜色为淡灰色 -->
            {foreach $goods_list as $vo }
            <li class=" js-goods-li {if condition="$vo['stock_num'] == 0" }li2{/if}">
                <div class="bh-div1 bh-div1s">【{$vo.brand_title}】{$vo.goods_title},{$vo.goods_model},{$vo.goods_spec}</div>
                             <div class="bh-div2 bh-div2s">{$vo.stock_num}</div>
                             <div class="bh-div3 bh-div3s">
                                 <img src="__CDN__/html/img/hz-img26.png" data-id="{$vo['goods_id']}" data-type="0" data-ope="0" class="img-jg change-num">
                                 <input type="text" value="{$vo.buy_num}" class="text-inp js-goods-num-{$vo['goods_id']}" disabled="disabled">
                                 <img src="__CDN__/html/img/hz-img23.png" data-id="{$vo['goods_id']}" data-type="0" data-ope="1"  class="img-jg change-num">            
                             </div>
                         </li>
                         {/foreach}
            </ul>
        </div>

        <div class="sqbh-fixed">
            <div class="fixed-div1">
                <div class="fixed-pa js-goods-total-price">本次补货总价:¥{$cart.total_price}</div>
                <div class="fixed-pa js-goods-total-num">本次补货商品数:{$cart.num}件</div>
            </div>
            <div class="fixed-div2 js-zf" data-type="3">边吃边付</div>
            {if condition="($buhuo_config['zhekou'] == 0) OR ($buhuo_config['zhekou'] == 10) "}
            <div class="fixed-div2 fixed-div4 js-zf" data-type="2">
                <div>立即支付</div>
            </div>
            {else /}
            <div class="fixed-div2 fixed-div3 js-zf" data-type="2">
                <div>立即支付</div>
                <div class="qx-j" style='right: 0;'>{$buhuo_config.zhekou}折</div>
            </div>
            {/if}
        </div>
        {/block}
        {block name="script"}
        <script>
            mui('body').on('tap', ".change-num", function (res) {
                var id = $(this).attr('data-id');
                var ope = $(this).attr('data-ope');
                var type = $(this).attr('data-type'); //操作类型 0-列表 1-详情

                $.post("{:url('change')}", {goods_id: id, ope: ope}, function (res) {
                    if (res.code == '0') {
                        mui.toast(res.msg);
                    } else {
                        if (res.code == '80') {
                            //删除
                            $('.js-goods-num-' + id).val(0);

                        } else if (res.code == '81') {
                            //新增
                            $('.js-goods-num-' + id).val(1);
                        } else {

                            //正常增减
                            var num = $('.js-goods-num-' + id).val();
                            if (ope == 1) {
                                num++;
                            } else {
                                num--;
                            }
                            if (type == 1) {
                                $('.js-tk-buynum').val(num);
                            }
                            $('.js-goods-num-' + id).val(num);
                        }
                        changeTotal(res.data.num, res.data.total_price);

                    }
                }, 'json');
            });

            mui('body').on('tap', ".js-zf", function (res) {
                var remark = $('.js-remark').val();
                var type = $(this).attr('data-type'); //操作类型 2-边吃边付 3-立即支付

                $.post("{:url('comfirm')}", {type: type, remark: remark}, function (res) {
                    if (res.code == '0') {
                        mui.toast(res.msg);
                    } else {
                        location.href = res.data.url;
                    }
                }, 'json');
            });

            function changeTotal(num, price) {
                $(".js-goods-total-num").html("本次补货商品数:" + num + "件");
                $(".js-goods-total-price").html("本次补货总价:¥" + price + "元");
            }
        </script>
        {/block}